import React from 'react'
import './index.css'


const FlexBoxJustifyContent=()=>{
    return (
      <div>
        <h2>No CSS</h2>
        <div>
          <span>1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
        </div>
  
        <h2>default justifyContent</h2>
        <div className="flexBox">
          <span className="flexItem">1</span>
          <span className="flexItem">2</span>
          <span className="flexItem">3</span>
          <span className="flexItem">4</span>
        </div>
  
        <h2>justifyContent: flex-start</h2>
        <div className="flexBox start">
          <span className="flexItem">1</span>
          <span className="flexItem">2</span>
          <span className="flexItem">3</span>
          <span className="flexItem">4</span>
        </div>

        <h2>justifyContent: flex-end</h2>
        <div className="flexBox end">
          <span className="flexItem">1</span>
          <span className="flexItem">2</span>
          <span className="flexItem">3</span>
          <span className="flexItem">4</span>
        </div>
  
        <h2>justifyContent: center</h2>
        <div className="flexBox center">
          <span className="flexItem">1</span>
          <span className="flexItem">2</span>
          <span className="flexItem">3</span>
          <span className="flexItem">4</span>
        </div>

        <h2>justifyContent: space-between</h2>
        <div className="flexBox space-between">
          <span className="flexItem">1</span>
          <span className="flexItem">2</span>
          <span className="flexItem">3</span>
          <span className="flexItem">4</span>
        </div>


        <h2>justifyContent: space-around</h2>
        <div className="flexBox space-around">
          <span className="flexItem">1</span>
          <span className="flexItem">2</span>
          <span className="flexItem">3</span>
          <span className="flexItem">4</span>
        </div>
      </div>
    )
  }
  
export default FlexBoxJustifyContent